@import "./_var.less";
// &:not(:nth-last-child(-n + 2)) {
//   margin-bottom: 32rpx;
// }

/*
* 初始化样式、统一样式（安卓、IOS的差异）
**/
page,
text,
view,
input,
button,
textarea,
navigator,
cover-view,
swiper,
swiper-item,
scroll-view {
  color: @color-text-main;
  box-sizing: border-box;
  word-wrap: break-word; //英文自动换行
  word-break: break-all;
  font-family: PingFangSC-Regular, PingFang SC;
}
// scroll-view {
//   overflow: auto;
// }
page {
  display: flex;
  justify-content: flex-start;
  align-items: stretch;
  flex-direction: column;
  // height: 100vh; //如果某些页面需要垂直方向拉伸，应该单独定义高度，不应该全局处理
  font-size: @font-size-main;
  background: @color-bg-main;
}
textarea {
  width: 100%;
}
image,
cover-image {
  display: block;
  box-sizing: border-box;
}
navigator {
  &.disabled {
    pointer-events: none; //naigator标签加上这个css属性时，可以阻止跳转路由
  }
}
input {
  font-size: @font-size-main;
}
button {
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  // width: fit-content !important;
  // padding: 0 !important;
  // margin: 0 !important;
  margin: 0;
  padding: 0;
  background: none;
}

button::after {
  border: none;
}
slider {
  margin: 0;
}
.page {
  overflow: auto;
}
::-webkit-scrollbar {
  display: none;
}
.ios-padding-bottom {
  padding-bottom: constant(safe-area-inset-bottom);
  padding-bottom: env(safe-area-inset-bottom);
}

/**
* 当呈多行多列排列且最后一行凑不满一行时，为了行列对齐好看，需要使用额外的空盒子填充占满（需加这个类）
*/
.f-empty {
  height: 0 !important;
  visibility: hidden !important;
}

/**
* 文本省略
* line-1 ~ line-3
*/
.for-line(@i) when (@i <=3) {
  .line-@{i} {
    .text-ellipsis(@i);
  }
  .for-line((@i + 1));
}
.for-line(1);

/**
* 弹性布局类
* f-sb-c       x轴两端对齐(space-between)，y轴垂直居中(center) 
* f-sb-s-c     在列方向的前提下(column)，x轴占满(stretch)，y轴两端对齐(space-between)
* f-sb-fs-w    x轴两端对齐(space-between)，y轴从上到下依次排列(flex-start)，占满一行自动换行(wrap)
* f-sb-fs-w-c  x轴两端对齐(space-between)，y轴从上到下依次排列(flex-start)，占满一行自动换行(wrap)，多个行在y轴上居中(center)
*/
@justifyContent: {
  fs: flex-start;
  fe: flex-end;
  c: center;
  sb: space-between;
  sa: space-around;
  // se: space-evenly; //注意space-evenly的兼容性不太好，且几乎很少用
};
@alignItems: {
  fs: flex-start;
  fe: flex-end;
  c: center;
  b: baseline;
  s: stretch;
};
@flexDirection: {
  // r: row;
  // rr: row-reverse;
  c: column;
  // cr: column-reverse;
};
@flexWrap: {
  // n: nowrap;
  w: wrap;
  // wr: wrap-reverse;
};
//如果再嵌套循环一层，生成的代码太多了，且用的少，故不采用
// @alignContent: {
//   fs: flex-start;
//   fe: flex-end;
//   c: center;
//   sb: space-between;
//   sa: space-around;
//   s: stretch;
// };
each(@justifyContent, .(@jVal, @jKey) {
  each(@alignItems, .(@aVal, @aKey) {
    .f-@{jKey}-@{aKey} {
      display: flex;
      justify-content: @jVal;
      align-items: @aVal;
    }
    each(@flexDirection, .(@dVal, @dKey) {
      .f-@{jKey}-@{aKey}-@{dKey} {
        display: flex;
        justify-content: @jVal;
        align-items: @aVal;
        flex-direction: @dVal;
      }
    });
    each(@flexWrap, .(@wVal, @wKey) {
      .f-@{jKey}-@{aKey}-@{wKey} {
        display: flex;
        justify-content: @jVal;
        align-items: @aVal;
        flex-wrap: @wVal;
      }
      // each(@alignContent, .(@cVal, @cKey) {
      //   .f-@{jKey}-@{aKey}-@{wKey}-@{cKey} {
      //     display: flex;
      //     justify-content: @jVal;
      //     align-items: @aVal;
      //     flex-wrap: @wVal;
      //     align-content: @cVal;
      //   }
      // });
    });
  });
});

/**
* 弹性布局的项目伸缩比例
* f-0 ~ f-3
*/
.f-0 {
  flex-grow: 0;
  flex-shrink: 0;
}
.for-f(@i) when (@i <=3) {
  .f-@{i} {
    flex: @i;
  }
  .for-f((@i + 1)); // 递归调用自身
}
.for-f(1); // 调用循环,从1，直到<=3

/**
* padding、margin间距
* p-qtr ~ ml-two     pt-2 ~ ml-32
*/
@gapTypes: {
  p: padding;
  m: margin;
};
@gapDirections: {
  a: all;
  t: top;
  r: right;
  b: bottom;
  l: left;
};
@gapSizes: {
  qtr: @gap-qtr;
  half: @gap-half;
  one: @gap;
  one-half: @gap-one-half;
  two: @gap-two;
};
@gapNumMax: 16;
each(@gapTypes, .(@tVal, @tKey) {
  each(@gapDirections, .(@dVal, @dKey) {
    //根据字符串生成：p-qtr ~ ml-two
    each(@gapSizes, .(@sVal, @sKey) {
      .@{tKey}-@{sKey} when (@dKey =a) {
          @{tVal}: @sVal;
      }
      .@{tKey}@{dKey}-@{sKey} when (@dKey =t) {
          @{tVal}-@{dVal}: @sVal;
      }
      .@{tKey}@{dKey}-@{sKey} when (@dKey =r) {
          @{tVal}-@{dVal}: @sVal;
      }
      .@{tKey}@{dKey}-@{sKey} when (@dKey =b) {
          @{tVal}-@{dVal}: @sVal;
      }
      .@{tKey}@{dKey}-@{sKey} when (@dKey =l) {
          @{tVal}-@{dVal}: @sVal;
      }
    });
    //根据数字生成 p-2 ~ ml-32
    .for-g(@i) when (@i <=@gapNumMax) {
      @num: @i*2;
      .@{tKey}-@{num} when (@dKey =a) {
          @{tVal}: @num*1rpx;
      }
      .@{tKey}@{dKey}-@{num} when (@dKey =t) {
          @{tVal}-@{dVal}: @num*1rpx;
      }
      .@{tKey}@{dKey}-@{num} when (@dKey =r) {
          @{tVal}-@{dVal}: @num*1rpx;
      }
      .@{tKey}@{dKey}-@{num} when (@dKey =b) {
          @{tVal}-@{dVal}: @num*1rpx;
      }
      .@{tKey}@{dKey}-@{num} when (@dKey =l) {
          @{tVal}-@{dVal}: @num*1rpx;
      }
      .for-g((@i + 1)); // 递归调用自身
    }
    .for-g(1); // 调用循环,从1，直到<=16
  });
});
